<template>
	<view class="like">
	  <view class="header">
	  	<view class="left">
	  		<image @click="goBack()" src="../../static/Icon_Arrow.png" mode=""></image>
			<text>我的喜欢</text>
			<text>(9)</text>
	  	</view>
		<view class="right">
			<text>管理</text>
		</view>
	  </view>
	  <view class="tab">
	  	<ul>
			<li v-for="(item, index) in tab" :key="index" @click="tabFn(index)" :class="{active: num === index}">
				{{item.text}}
			</li>
		</ul>
	  </view>
	  <view class="content">
	  	<ul>
			<li v-for="(goodItem, index) in goods" :key="index">
				<view class="goodsPhoto">
					<image :src=goodItem.img mode=""></image>
				</view>
				<view class="momeyBox">
					<text>¥</text>
					<text>{{goodItem.money}}</text>
				</view>
			</li>
		</ul>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num : 0,
				tab:[
					{
						id:1,
						text:"全部",
					},{
						id:2,
						text:"粉底液",
					},{
						id:3,
						text:"素颜霜",
					},{
						id:4,
						text:"眉笔",
					},{
						id:5,
						text:"口红",
					},{
						id:6,
						text:"腮红",
					},{
						id:7,
						text:"眼影",
					}
				],
				goods:[
					{
						img:"../../static/fendi01.png",
						money:209,
					},{
						img:"../../static/fendi02.png",
						money:470,
					},{
						img:"../../static/fendi03.png",
						money:79,
					},{
						img:"../../static/fendi04.png",
						money:119,
					},{
						img:"../../static/goods02.jpg",
						money:69.8,
					},{
						img:"../../static/kouhong02.jpg",
						money:59.8,
					},{
						img:"../../static/kouhonh01.jpg",
						money:125,
					},{
						img:"../../static/kouhong03.jpg",
						money:79.8,
					},{
						img:"../../static/fendi06.jpg",
						money:99,
					}
				]
			};
		},
		methods: {
			tabFn(index){
				this.num = index
			},
		    goBack() {  
		      uni.switchTab({
		      	url:'/pages/my/my'
		      }) 
		    }  
		  } 
	}
</script>

<style lang="less" scoped>
	.like {
		width: 100%;
		height: 100%;
		// background-color: #f6f6f7;
		
		.header {
			width: 100%;
			height: 50px;
			background-color: white;
			display: flex;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 100;
			background-color: #fff;
			justify-content: space-between;
			
			.left {
				width: 150px;
				// background-color: palegreen;
				display: flex;
				align-items: center;
				font-weight: 600;
				
				image {
					width: 30px;
					height: 30px;
					// background-color: paleturquoise;
				}
				
				text:nth-child(2){
					font-size: 18px;
				}
				
			}
			
			.right {
				width: 46px;
				// background-color: palegreen;
				line-height: 50px;
				font-size: 15px;
				font-weight: 600;
			}
		}
		
		.tab {
			width: 100%;
			height: 50px;
			overflow-x: scroll;
			position: fixed;
			left: 0;
			top: 50px;
			z-index: 100;
			background-color: #fff;
			
			ul {
				list-style: none;
				margin: 0;
				padding: 0;
				width: fit-content;
				display: flex;
				// flex-wrap: nowrap;
				
				li {
					width: 60px;
					text-align: center;
					display: inline-block;
					padding: 6px 8px;
					margin: 8px;
					border-radius: 6px;
					background-color: white;
					font-weight: 600;
					color: #e7b4b9;
					
					&.active {
						background-color: #e7b4b9;
						color: white;
					}
				}
			}
		}
		
		.content {
			width: 100%;
			margin-top: 100px;
			
			ul {
				width: 96%;
				list-style: none;
				margin: 0;
				padding: 0;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				// background-color: palegoldenrod;
				
				li {
					width: 114px;
					height: 140px;
					margin: 5px 2px;
					// background-color: #fff;
					
					.goodsPhoto {
						width: 100%;
						height: 110px;
						
						image {
							width: 100%;
							height: 100%;
							border-radius: 6px;
						}
					}
					
					.momeyBox {
						width: 100%;
						height: 20px;
						margin-top: 4px;
						// background-color: palegoldenrod;
						
						text{
							color: #f77c73;
							font-weight: 600;
							font-family: 黑体;
						}
						
						text:nth-child(1) {
							font-size: 13px;
						}
						
						text:nth-child(2) {
							font-size: 19px;
						}
					}
				}
			}
		}
		
	}
	// 隐藏横向滚动条
	::-webkit-scrollbar {
		display: none;
	}
</style>
